/*
 * @Author: zeki mini
 * @Date: 2021-03-30 15:32:08
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-07 14:09:03
 * @Description: 司机封禁
 */
import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  PixelRatio,
  TouchableOpacity
} from 'react-native';
import Moment from 'moment';
import {
  empty12,
  iconLoopRed,
  iconRefreshBlack
} from '@/images';
import {
  mainBgColorWhite,
  px2dp,
  fontColorDeepGray,
  fontColorSecDeepGray,
  fontColorDeepRed,
  fontColorRed,
  fontColorLightRed,

} from '@/styles';
import { msg } from '@/common';

export default class DriverBan extends React.PureComponent {
  render() {
    const { banReason, relieveTime, } = this.props;
    return (
      <>
        <View style={styles.emptyWrap}>
          <View style={styles.headerStatus}>
            <Image
              source={iconLoopRed}
              resizeMode='contain'
              style={styles.loopImg}
            />

            <Text style={styles.headerStatusText}>封禁中</Text>
          </View>
          <View style={styles.banImgContainer}>
            <Image
              source={empty12}
              resizeMode='contain'
              style={styles.banImg}
            />
          </View>

          <Text style={styles.desc}>您当前已被封禁，无法接单</Text>
          <Text style={styles.reason}>
            封禁原因：
            {!!banReason && banReason}
          </Text>
          <Text style={styles.unBanTime}>
            （
            {!!relieveTime && Moment(relieveTime).format('YYYY-MM-DD HH:mm:ss')}
            {' '}
            解除封禁）
          </Text>
        </View>
        <TouchableOpacity
          style={styles.refreshBtn}
          activeOpacity={0.8}
          onPress={() => {
            msg.emit('router: refreshRoute', {
              routeName: 'DriverTab',
            });
          }}
        >
          <Text style={styles.refreshText}>刷新页面</Text>
          <Image source={iconRefreshBlack} resizeMode='stretch' style={styles.refreshImg} />
        </TouchableOpacity>
      </>
    );
  }
}
const styles = StyleSheet.create({
  emptyWrap: {
    width: px2dp(702),
    backgroundColor: mainBgColorWhite,
    marginHorizontal: px2dp(24),
    marginVertical: px2dp(24),
    borderRadius: px2dp(16),
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(32),
  },
  loopImg: {
    width: px2dp(36),
    height: px2dp(36),
  },
  headerStatus: {
    width: px2dp(168),
    height: px2dp(60),
    flexDirection: 'row',
    borderWidth: 1 / PixelRatio.get(),
    borderRadius: px2dp(30),
    borderColor: fontColorRed,
    backgroundColor: fontColorLightRed,
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: px2dp(20),
  },
  headerStatusText: {
    fontSize: px2dp(26),
  },
  banImgContainer: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: px2dp(40)
  },
  banImg: {
    width: px2dp(240),
    height: px2dp(240),
  },
  desc: {
    fontSize: px2dp(32),
    lineHeight: px2dp(46),
    color: fontColorDeepRed,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  reason: {
    color: fontColorDeepGray,
    fontSize: px2dp(28),
    marginTop: px2dp(24),
    textAlign: 'center'
  },
  unBanTime: {
    color: fontColorSecDeepGray,
    fontSize: px2dp(24),
    marginTop: px2dp(24),
    textAlign: 'center'
  },
  refreshBtn: {
    width: px2dp(240),
    height: px2dp(80),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(40),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  refreshText: {
    fontSize: px2dp(28),
    color: fontColorDeepGray
  },
  refreshImg: {
    width: px2dp(28),
    height: px2dp(28),
    marginLeft: px2dp(12)
  }
});
